<template>
  <view class="machine-detail">
    <!-- <uni-nav-bar  title="水机详情" dark  :fixed="true" left-icon="left" :left-text="true"  /> -->
    <intake-nav-bar title="水机详情" dark :fixed="true" color="#fff"/>
    <view class="machine">
      <view class=" h100vh  ">
        <view v-if="list.length < 1" class="ac mb30 empty-style">
          <image :src="staticImage.empty" class="empty-img"></image>
          <view class="fs28 name-color">暂无水机</view>
        </view>

        <scroll-view class="list" scroll-y="true"  @scrolltolower="getList" lower-threshold="50"  v-else>
          <view class="machine-item flex bggray" v-for="(item,index) in list" :key="index">
            <view class="item-info w-70">
              <view class="item-info-code">{{item.code}}</view>
              <view class="item-info-title  ">{{item.title}}</view>
              <view class="item-info-img ">
                <image :src="mapPic" ></image>
                <text>{{item.address}}</text>
              </view>
            </view>
            <view class="item-day  w-30 ac">
              <view class="day-time h90 pt10 pb10">
                <view class="day-time">购买日期</view>
                <view class="day-time">{{item.signed_at}}</view>
              </view>
              <view class="day-time-d h90 pt10">
                <view class="day-time">租赁日期剩余</view>
                <view class="day-time">{{item.remaining}}天</view>
              </view>
            </view>
<!--            <view class="fs28 name-color mb20">所属片区：{{item.community_info.title}}</view>-->
<!--            <view class="fs28 name-color mb20">开始运营：{{item.signed_at}}</view>-->
          </view>
          <view @click='getListpage' class=" uni-load-more_text ac h50" v-if="loadingType">点击加载更多</view>
          <view class="uni-load-more_text ac h50"  v-if="noMore">没有更多数据了</view>
        </scroll-view>
      </view>
    </view>




  </view>
</template>

<script>

import {
  getUserInfo
} from '@/api/user.js';
import {apparatusList} from '@/api/apparatus';
export default {
  data() {
    return {
      loadingType: '', //加载更多status
      loading: false, // 是否正在加载数据
      noMore: false, // 是否没有更多数据了
      page: 1,
      limit: 10,
      list: [],
      mapPic: this.$common.imgUrl()+'/images/score/map@2x.png',
      staticImage: {
        empty:this.$common.imgUrl() + '/img/other/shuiji@2x.png',
      }
    }
  },
  async onLoad(query) {
    await this.getList();
  },
  onShow() {},
  mounted() {},
  // 滚动监听
  onPageScroll(e) {
    console.log("滚动监听",e)
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件

    uni.$emit('scroll');
  },
  methods: {
    async getUserInfo(){
      let that = this;
      getUserInfo().then(res => {
        that.$set(that, 'userInfo', res.data);
        that.userInfo = res.data
      })
    },
    getListpage(){
      this.getList()
    },
    async getList() {
      console.log("this.loadingType",this.loadingType)
      if (this.loadingType === "noMore") {
        //防止重复加载
        return;
      }
      apparatusList({
        page: this.page++,
      }).then(res=>{
        this.list = [...this.list, ...res.data.data];
        let per_page = res.data.per_page
        let total = res.data.total
        let count = res.data.data.length
        console.log(count < per_page)
        console.log(this.loadingType)
        if (count < per_page) {
          this.noMore=true
          this.loadingType=false
          // this.loadingType = "noMore"
        } else {
          this.noMore=false
          this.loadingType=true
          // this.loadingType = "more"
        }
      })
    }
  }
}
</script>

<style lang="scss">

.machine-detail{
  background: url($baseBgImage) no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh; /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  justify-content: center;
  background-size: cover; /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;
  .machine{
    font-family: 'MiSans-Regular';
    .machine-item{
      padding: 20rpx;
      margin: 20rpx;
      .item-info{
        .item-info-code{
          font-family: MiSans;
          font-weight: 600;
          font-size: 29rpx;
          color: #212B3D;
        }
        .item-info-title{
          font-weight: 400;
          font-size: 38rpx;
          color: #212B3D;
        }
        .item-info-img{
          image  {
            width: 17rpx;
            height: 20rpx;
          }
          text{
            font-weight: 400;
            font-size: 24rpx;
            color: #212B3D;
          }
        }
      }
      .item-day{
        border-left: 1rpx   dashed #acadad;
        .day-time{
          font-size: 24rpx;
          color: #212B3D;
        }
        .day-time-d{
          border-top: 1rpx   dashed #acadad;
        }
      }


    }
  }
}
.uni-load-more_text{
  font-size: 28upx;
  color: #999
}

.empty-img{
  width: 67rpx;
  height: 103rpx;
}
</style>
